<template>
  <div>
    <h1>Vue 加密解密 Demo</h1>
    <div>
      <label for="key">密钥:</label>
      <input v-model="key" id="key" placeholder="请输入密钥" />
    </div>
    <div>
      <label for="encryptedData">加密数据:</label>
      <textarea
          v-model="encryptedData"
          id="encryptedData"
          placeholder="粘贴加密的 Base64 数据"
      ></textarea>
    </div>
    <button @click="decrypt">解密</button>

    <button @click="encrypt">加密</button>

    <div v-if="decryptedData">
      <h3>解密后的数据:</h3>
      <p>{{ decryptedData }}</p>
    </div>
    <div v-if="error">
      <h3 style="color: red;">错误:</h3>
      <p>{{ error }}</p>
    </div>
  </div>
</template>

<script>
import Encryption from "@/tools/encryption"

export default {
  data() {
    return {
      key: '', // 用户输入的密钥
      encryptedData: '', // 用户输入的加密数据
      decryptedData: '', // 解密后的明文
      error: '' // 错误信息
    };
  },
  methods: {
    encrypt() {
      this.decryptedData =Encryption.encrypt(this.encryptedData,this.key);
    },
    decrypt() {
        this.decryptedData =Encryption.decrypt(this.encryptedData,this.key);
    },
  },
};
</script>

<style scoped>
textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}

button {
  margin: 10px 0;
}
</style>
